<template>
  <div class="container">
    <div>
      <a-space>
        <a-button type="primary" @click="handleClick"> 新增类型 </a-button>
      </a-space>
    </div>
    <tableTurn
      style="margin: 20px 0"
      :tableData="getData"
      :args="args"
      ref="tableRef"
    >
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        title="类型名称"
        :width="150"
        data-index="name"
        align="center"
      />
      <a-table-column title="是否启用" :width="150" align="center">
        <template #cell="{ record }">
          {{ record.enable === 1 ? '启用' : '停用' }}
        </template>
      </a-table-column>
      <a-table-column
        :width="150"
        title="备注"
        data-index="remark"
        align="center"
      >
        <template #cell="{ record }">
          <a-input v-model="record.remark" disabled
        /></template>
      </a-table-column>
      <a-table-column fixed="right" :width="250" title="操作" align="center"
        ><template #cell="{ record }">
          <a-space>
            <a-button type="text" @click="goEdit(record)">修改</a-button>
            <a-popconfirm
              content="确认删除?"
              type="error"
              @ok="deleteItem(record.id)"
            >
              <a-button type="text" status="danger">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table-column>
    </tableTurn>
    <addType
      v-model:visible="modalVisible"
      @addTypeForm="addTypeForm"
      :formData="formData"
      :title="titleModel"
    />
    <!-- <a-progress :percent="0.2" /> -->
    <!-- <br /> -->
    <!-- <br /> -->
    <!-- <a-progress :percent="0.3"> </a-progress> -->
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick } from 'vue';
  import { useRouter } from 'vue-router';
  import { postShelves } from '@/api/inventory-management/warehouse-management/shelf-list/index';
  import {
    getWarehouseType,
    postWarehouseType,
    delWarehouseType,
  } from '@/api/inventory-management/warehouse-management/warehouse-list/index';
  import miiter from '@/utils/mitt';
  import addType from './components/add-type.vue';

  const props = withDefaults(
    defineProps<{
      getTableData: any;
    }>(),
    {}
  );
  const tableRef = ref();
  const titleModel = ref();
  const router = useRouter();
  const modelVisible = ref(false);
  const formData = ref({});
  const createId = ref(1);
  const getUnitData = ref(props.getTableData);
  // 表格配置
  const args = reactive({
    stripe: true,
    // rowSelection: {
    //   type: 'checkbox',
    //   showCheckedAll: true,
    //   onlyCurrent: false,
    // },
    bordered: {
      headerCell: true,
    },
    rowKey: 'name', // 批量选择按钮以客户名称来作为key
  });

  miiter.on('warehousetype', (val: any) => {
    createId.value = val;
    nextTick(() => {
      tableRef.value.loadData();
    });
  });
  const UnitForm = ref();

  let modalVisible = ref(false);

  // 储存当前行的数据
  const currForm = reactive({
    list: {},
  });

  const handleClick = () => {
    if (!createId.value) return;
    formData.value = {
      name: '',
      type: createId.value,
      enable: 1,
      remark: '',
    };
    titleModel.value = '新增类型';
    modalVisible.value = true;
  };

  const addTypeForm = async (data: any, key: string) => {
    if (key === 'add') {
      await postWarehouseType({ ...data });
    } else {
      await postWarehouseType({ ...data });
    }
    tableRef.value.loadData();
    // router.go(0);
  };

  const getData = async (page?: any) => {
    try {
      const res = await getWarehouseType({ ...page, type: createId.value });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 前往编辑
  const goEdit = (record: any) => {
    titleModel.value = '修改货架';
    modalVisible.value = true;
    formData.value = record;
  };

  const deleteItem = async (id: number) => {
    try {
      await delWarehouseType({ id });
      tableRef.value.loadData();
    } catch (error: unknown) {
      console.log(error);
    }
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
    margin-bottom: 20px;

    .content {
      padding: 20px 10px;
    }
    .state-item-Y {
      width: 30px;
      height: 30px;
      font-size: 12px;
      border: 1px solid rgba(148, 191, 255, 1);
      background-color: rgba(232, 243, 255, 1);
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #3d7eff;
    }
    .state-item-N {
      color: #f53f3f;
      width: 30px;
      height: 30px;
      font-size: 12px;
      border: 1px solid rgba(251, 172, 163, 1);
      background-color: rgba(255, 236, 232, 1);
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  // 扩展行的样式

  // .space-unit {
  //   background-color: var(--color-bg-2);
  //   border-radius: 4px;
  // }

  // .title-fix {
  //   margin: 0 0 12px 0;
  //   font-size: 14;
  // }
  // :deep(.section-title) {
  //   margin: 0 0 12px 0;
  //   font-size: 14px;
  // }
</style>
